<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<%--<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">--%>
<%--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>--%>
<%--<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>--%>

<script type="text/javascript" src="<c:url value='/teapage/finalExam/js/axios.min.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/teapage/finalExam/js/iview.css'/>">
<script type="text/javascript" src="<c:url value='/teapage/finalExam/js/vue.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/teapage/finalExam/js/iview.min.js'/>"></script>

<%--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--%>
<%--<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">--%>
<%--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>--%>
<%--<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>

<link href="<c:url value='/teapage/finalExam/js/bootstrap.min.css'/>" rel="stylesheet">
<link href="<c:url value='/teapage/finalExam/js/bootstrap-theme.min.css'/>" rel="stylesheet">
<script src="<c:url value='/teapage/finalExam/js/jquery.min.js'/>"></script>
<script src="<c:url value='/teapage/finalExam/js/bootstrap.min.js'/>"></script>

<div  style="width: 98%;margin: auto">

    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#add-final-exam" data-toggle="tab">添加期末试题</a>
        </li>
        <li>
            <a href="#check-final-exam" data-toggle="tab">在线批改期末试题</a>
        </li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <%--        添加期末试题--%>
        <div class="tab-pane fade in active" id="add-final-exam">
            <div id="app1">
                <div style="clear:both"></div>
                <br>
                <Collapse>
                    <Panel v-for="(finalExamTask,index) in finalExamTasks" :key="index">

                        题目编号：
                        <input style="display: inline;width: 60%" type="text" class="form-control"
                               v-model="finalExamTask.titleNum">

                        <div slot="content">
                            <div class="form-horizontal" role="form">

                                <div class="form-group">
                                    <span style="display: inline-block;width: 20%">该题满分</span>
                                    <input v-model="finalExamTask.fullMark" type="number" class="form-control"
                                           style="display: inline-block;width:70%">
                                </div>
                                <div class="form-group">
                                    <span style="display: inline-block;width: 20%">是否为选择题:</span>
                                    <input type="radio" :name="'optionsRadios'+index" v-model="finalExamTask.isSelect"
                                           value=true
                                           @click="isSelect[index]=true"
                                           checked> 是
                                    <input type="radio" :name="'optionsRadios'+index" v-model="finalExamTask.isSelect"
                                           @click="isSelect[index]=false"
                                           value=false>否
                                </div>

                                <!--                        选择题-->
                                <div v-show="isSelect[index]">
                                    <div class="form-group">
                                        <span style="display: inline-block;width: 20%">选择题答案为: </span>
                                        <input v-model="finalExamTask.selectAnswer" type="text" class="form-control"
                                               style="display: inline-block;width:70%">
                                    </div>
                                </div>

                                <!--                    非选择题，评分标准-->
                                <div v-show="!isSelect[index]">
                                    <Collapse>
                                        <Panel v-for="(scoreItem,index1) in finalExamTask.scoreItems"
                                               :key="index1">
                                            评分标准{{index1 + 1}}
                                            <div slot="content">
                                                <div class="form-group">
                                                    <span style="display: inline-block;width: 20%">描述: </span>
                                                    <input type="text" class="form-control"
                                                           v-model="scoreItem.description"
                                                           style="display: inline-block;width:70%">
                                                </div>
                                                <div class="form-group">
                                                    <span style="display: inline-block;width: 20%">该项满分: </span>
                                                    <input type="number" class="form-control"
                                                           v-model="scoreItem.fullMark"
                                                           style="display: inline-block;width:70%">
                                                </div>
                                            </div>
                                        </Panel>

                                    </Collapse>
                                    <button class="btn btn-primary" @click="addScoreItem(index)">添加评分标准</button>

                                    <div style="clear:both"></div>
                                </div>

                                <!--                    课程目标-->
                                <div>
                                    <div class="form-group" v-for="(courseTarget,index2) in finalExamTask.courseTargets"
                                         :key="index2">
                                        <span style="display: inline-block;width: 20%">{{courseTarget.courseTargetNum}}</span>
                                        权重：<input v-model="courseTarget.weight" type="text" class="form-control"
                                                  style="display: inline-block;width:70%">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </Panel>

                </Collapse>
                <br>

                <button class="btn btn-primary" @click="addTask()">添加题目</button>
                <button class="btn btn-primary" @click="submitFinalExamTask()">提交</button>
            </div>

        </div>

        <%--            批改试题--%>
        <div class="tab-pane fade" id="check-final-exam">
            <div id="app2">
                <%--                选择学生--%>
                <label>选择学生:</label>

                <br>
                <label>班级:</label>
                <br>
                <Select v-model="selectedStudent[0]" style="width:200px" class="form-control">
                    <Option v-for="item in selectStudent" :value="item.value" :key="item">{{ item.label }}</Option>
                </Select>
                <br>
                <label>学号:</label>
                <input type="text" class="form-control" v-model="selectedStudent[1]" style="width:200px">

                <br>
                <label>学生:</label>
                <Cascader placeholder="班级/学生" :data="selectStudent" trigger="hover" @change="change()"
                          v-model="selectedStudent"></Cascader>

                <%--    选择题目--%>
                <label>选择题目,题目编号:</label>
                <br>
                <ul class="pagination">

                    <li v-for="(titleNum,index) in titleNums" :key="index">
                        <a href="#" @click="changeTask(index)">{{titleNum}}
                        </a>
                    </li>

                </ul>

                <%--题目批改--%>
                <div style="border: #1b6d85 solid 2px;width: 70%;margin: auto;padding: 30px">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目编号:</label>
                        <div class="col-sm-10">
                            <label>{{finalExamTask.titleNum}}</label>
                            <%--                            <input type="text" class="form-control" v-model="finalExamTask.titleNum" disabled>--%>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">该题满分:</label>
                        <div class="col-sm-10">
                            <label>{{finalExamTask.fullMark}}</label>
                            <%--                            <input type="text" class="form-control" v-model="finalExamTask.fullMark" disabled>--%>
                        </div>
                    </div>

                    <%--    选择题--%>
                    <div v-if="finalExamTask.isSelect">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">题型:</label>
                            <div class="col-sm-10">
                                <label>选择题</label>
                                <%--                                <input type="text" class="form-control" value="选择题" disabled>--%>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">标准答案:</label>
                            <div class="col-sm-10">
                                <label>{{finalExamTask.answer}}</label>
                                <%--                                <input type="text" class="form-control" v-model="finalExamTask.answer" disabled>--%>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生答案:</label>
                            <div class="col-sm-10">
                                <%--                                <label >{{finalExamTask.selectedAnswer}}</label>--%>
                                <input type="text" class="form-control" v-model="finalExamTask.selectedAnswer">
                            </div>
                        </div>
                        <div style="clear:both"></div>
                    </div>

                    <%--    非选择题--%>
                    <div v-if="!finalExamTask.isSelect">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">题型:</label>
                            <div class="col-sm-10">
                                <label>非选择题</label>
                                <%--                                <input type="text" class="form-control" value="非选择题" disabled>--%>
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <hr>
                        <%--                        评分标准--%>
                        <div v-for="(scoreItem,index) in finalExamTask.scoreItems" :key="index">

                            <div class="form-group">
                                <label class="col-sm-2 control-label">序号:</label>
                                <div class="col-sm-10">
                                    <label>评分标准{{index+1}}</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">描述:</label>
                                <div class="col-sm-10">
                                    <label>{{scoreItem.description}}</label>
                                </div>
                            </div>
                            <div style="clear:both"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">该项满分:</label>
                                <div class="col-sm-10">
                                    <label>{{scoreItem.fullMark}}</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">该项得分:</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" v-model="scoreItem.actualMark">
                                </div>
                            </div>
                            <div style="clear:both"></div>
                        </div>

                    </div>
                    <button class="btn btn-primary" @click="submitCheck()">提交</button>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    var data =${data};
    var courseId = data.data.courseId;
    var vm1 = new Vue({
        el: '#app1',
        data: {
            visible: false,
            isSelect: [true],
            finalExamTasks: [
                {
                    courseId: courseId,//课程ID
                    titleNum: null,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: null,//选择题答案
                    fullMark: null,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: null,//描述
                            fullMark: null//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            courseTargetId: null,
                            courseTargetNum: null,
                            weight: null
                        }
                    ]
                }
            ],
            courseTargets: [],
        },
        methods: {
            async submitFinalExamTask() {
                if (!window.confirm("题目编号为空的题目将不会被提交，提交后，已经批改的学生试卷将会被重置，您确定要继续吗？")) return;
                // console.log("data:" + JSON.stringify(this.finalExamTasks))
                var res = await axios.post("/finalExamTask/submit", this.finalExamTasks);
                // console.log("res:" + JSON.stringify(res));
                if (res.data.code != 0) {
                    window.alert(res.data.msg)
                } else {
                    window.alert("提交成功");
                }
            },
            show: function () {
                this.visible = true;
            },
            addTask: function () {
                var finalExamTaskTemplate = {
                    courseId: courseId,//课程ID
                    titleNum: null,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: null,//选择题答案
                    fullMark: null,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: null,//描述
                            fullMark: null//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            courseTargetId: 123,
                            courseTargetNum: '课程目标一',
                            weight: null
                        },
                        {
                            courseTargetId: 124,
                            courseTargetNum: '课程目标二',
                            weight: null
                        }
                    ]
                }

                finalExamTaskTemplate.courseTargets = [];
                for (var i = 0; i < this.courseTargets.length; i++) {
                    var courseTarget = {
                        courseTargetId: this.courseTargets[i].id,
                        courseTargetNum: '课程目标' + (i + 1),
                        weight: null
                    }
                    finalExamTaskTemplate.courseTargets.push(courseTarget)
                }

                this.isSelect.push(true)
                this.finalExamTasks.push(finalExamTaskTemplate);

            },
            addScoreItem: function (index) {
                var scoreItem = {
                    description: null,//描述
                    fullMark: null//满分
                }
                this.finalExamTasks[index].scoreItems.push(scoreItem)
            },

            changeTwoDecimal_f(x) {
                var f_x = parseFloat(x);
                if (isNaN(f_x)) {
                    return 0;
                }
                var f_x = Math.round(x * 100) / 100;
                var s_x = f_x.toString();
                var pos_decimal = s_x.indexOf('.');
                if (pos_decimal < 0) {
                    pos_decimal = s_x.length;
                    s_x += '.';
                }
                while (s_x.length <= pos_decimal + 2) {
                    s_x += '0';
                }
                return s_x;
            },
        },
        async created() {
            console.log("created执行了...");
            //获取数据库期末试题信息
            var res = await axios.get("/finalExamTask/get/" + courseId)
            this.finalExamTasks = res.data.data

            for (var i = 0; i < this.finalExamTasks.length; i++) {
                var courseTargets = this.finalExamTasks[i].courseTargets;
                for (var i = 0; i < courseTargets.length; i++) {
                    courseTargets[i].weight = this.changeTwoDecimal_f(courseTargets[i].weight)
                }
            }
            for (var i = 0; i < this.finalExamTasks; i++) {
                this.isSelect[i] = this.finalExamTasks.isSelect
            }

            this.courseTargets = (await axios.get("/courseTargets/" + courseId)).data.data
            // console.log("课程目标:" + JSON.stringify(await axios.get("/courseTargets/" + courseId)))

        }
    });
</script>
<script>
    var data =${data};
    var courseId = data.data.courseId;
    var vm2 = new Vue({
        el: '#app2',
        data: {
            selectedStudent: [],
            classes: [],
            selectStudent: [
                {
                    value: null,//班级Id
                    label: null,
                    children: [
                        {
                            value: null,//studentCode，学号
                            label: null,
                        }
                    ]
                }
            ],
            //题目编号
            titleNums: [
                // '1.1', '1.2', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3', '1.3'
            ],
            finalExamTask: {
                studentFinalExamScoreId: null,
                studentId: null,
                titleNum: null,//题目编号
                fullMark: null,//该题满分
                answer: null,//选择题答案

                isSelect: null,//是否为选择题
                selectedAnswer: null,//学生选择题答案

                scoreItems: [
                    {
                        description: null,
                        fullMark: null,
                        actualMark: null
                    }
                ]

            }, finalExamTasks: []
        },
        methods: {
            changeTask(index) {
                this.finalExamTask = this.finalExamTasks[index]

            },
            submitCheck() {
                console.log("提交:" + JSON.stringify(this.finalExamTask));
                axios.post("/finalExamTask/submitStudentScore", this.finalExamTask)
            }
        },
        watch: {
            async selectedStudent() {
                if (this.selectedStudent[1] == null || this.selectedStudent[1] == "" || this.selectedStudent[1] == undefined) {
                    return;
                }

                var studentId = this.selectedStudent[1];
                var res = await axios.get("/finalExamTask/getStudentSubmitScore/" + studentId)
                console.log("批改：" + JSON.stringify(res.data.data))
                // if (res.data.code != 0) {
                //     window.alert(res.data.msg)
                // }
                var data = res.data.data;
                this.finalExamTasks = data;
                this.titleNums = [];
                for (var i = 0; i < data.length; i++) {
                    this.titleNums[i] = data[i].titleNum
                }
                this.finalExamTask = this.finalExamTasks[0];
            }
        },
        async created() {
            //选择学生
            var res = await axios.get("/finalExamTask/selectStudent/" + courseId)
            var data = res.data.data;
            // console.log("收到数据:" + JSON.stringify(data))
            this.selectStudent = []
            this.selectStudent = data;
            this.classes = [];
            for (var i = 0; i < data.length; i++) {
                this.classes[i] = data[i].value;
            }
            this.selectedStudent[0] = data[0].value;
            this.selectedStudent[1] = data[0].children[0].value


            var studentId = this.selectedStudent[1];
            var res = await axios.get("/finalExamTask/getStudentSubmitScore/" + studentId)
            // console.log("批改：" + JSON.stringify(res.data.data))
            // if (res.data.code != 0) {
            //     window.alert(res.data.msg)
            // }
            var data = res.data.data;
            this.finalExamTasks = data;
            this.titleNums = [];
            for (var i = 0; i < data.length; i++) {
                this.titleNums[i] = data[i].titleNum
            }
            this.finalExamTask = this.finalExamTasks[0];

        }
    })
</script>
